<template>
    <div class='detailsParm'>      
        <div class='Parm1 Parm'><img src='../../assets/img/detailsParm/1.jpg' @load="imgload"></div>
        <div class='Parm2 Parm'><img src='../../assets/img/detailsParm/2.jpeg' @load="imgload"></div>
        <div class='detailsTable'>
            <!-- <table class='table'>
                    <tr v-for='(tr,index) in parms.detailsTr' :key="index">
                        <td v-for="(td,indez) in parms.detailsTd[index]" :key="indez" 
                        @click="tdColor(indez,index)" 
                        :class='{isColor:isColor(indez,index)}'
                        class='tds'>{{td}}</td>
                    </tr>
            </table>     -->
            <div class='tableTh'>
                <span>尺寸</span>
                <table class='table tableOne'>
                        <tr>
                            <td v-for="(td,indez) in parms.detailsTd[0]" :key="indez" 
                            @click="tdColor(indez)" 
                            :class='{isColor:isColor(indez)}'
                            class='tds'>{{td}}</td>
                        </tr>
                </table> 
            </div>
            <div class='tableTh'>
                <span>颜色</span>
                <table class='table'>
                        <tr>
                            <td v-for="(td,index) in parms.detailsTd[1]" :key="index" 
                            @click="tdColorTwo(index)" 
                            :class='{isColor:isColorTwo(index)}'
                            class='tds'>{{td}}</td>
                        </tr>
                </table>
            </div>
        </div>
        <!-- <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            counterIndex:0,
            counterIndez:0,
        }
    },
    mounted(){
        // let asss = document.getElementsByClassName('tds')[0];
        // console.log(asss)
    //    return a.isColor=null
    },
    methods:{
        imgload(){
            this.$emit('imgload')
        },
        tdColor(indez){
                // this.counterIndex=index
                 this.counterIndez=indez
                
        },
        isColor(indez){
            // if(indez===0){

            //     return false
            // }else{
            //     // &&this.counterIndex===index
                 return this.counterIndez===indez
            // }
           
        },
         tdColorTwo(index){
                // this.counterIndex=index
                 this.counterIndex=index
        },
        isColorTwo(index){
            // if(index===0){
            //     return false
            // }else{
                // &&this.counterIndex===index
                 return this.counterIndex===index
            // }
           
        }
    },
   props:{
       parms:{
            type:Object,
            default(){
                return{}
            }
       }
   },
   mounted(){
    //    console.log(this.parms)
   }
}
</script>

<style scoped>
    .isColor{
        background-color: #f00;
    }

    .detailsTable{
        margin: 0 8px;
    }
    /* .table td:nth-child(1){
        
        color:red
    } */
    .tableOne{
        margin-bottom: 10px;
    }
    .table tr{
        margin-bottom: 10px;
        box-shadow: 0 1px 3px black;
    }
    .table td{
        /* border: 1px solid #000; */
        text-align: center;
    }
    .table{
        flex:1;
        /* width: 100%; */
        border-spacing: 0;
        margin-left: 4px;
      
    } 
    .tableTh{
        /* width: 100%;
        display: inline-block;
        margin: 0 auto; */
        /* float: left; */
        display: flex;
    }
    /* .detailsParm{
       margin-top: 14px; 
    } */
    .Parm img{
        
        width: 100%;
    }
    .Parm1{
        margin-bottom: 10px;
    }
</style>